<!--  -->

<script setup>
import { useCountDown } from 'wot-design-uni'

defineOptions({
  options: {
    styleIsolation: 'shared', // 样式隔离模式设置为共享，表示组件样式可以相互影响
  },
})

const { time } = defineProps({
  time: {
    type: Number,
    default: 60000,
  },
})

const emit = defineEmits(['getCode'])
const show = ref(false)
// const countDown = ref(null)

const { start, reset, current } = useCountDown({
  time,
  onFinish() {
    console.log('倒计时结束')
    reset()
    show.value = false
  },
})

const getCode = async () => {
  if (show.value)
    return

  show.value = true
  start()
}
</script>

<template>
  <div>
    <wd-input v-bind="$attrs" type="text" class="inputCode">
      <template #suffix>
        <wd-button size="small" :disabled="show" @click="emit('getCode', getCode)">
          <div v-if="!show">
            获取验证码
          </div>
          <div v-else>
            {{ current.seconds }} 秒后重试
          </div>
        </wd-button>
      </template>
    </wd-input>
  </div>
</template>

<style scoped lang='scss'>
  :deep(.wd-count-down){
    color: #fff !important;
  }
</style>
